<!-- 设备返修收货确认 -->
<template>
  <div>
    <a-drawer title="设备返修收货确认" placement="right" :closable="true" :visible="visible" @close="onClose" width="660px"
      :body-style="{ padding: '20px 20px 80px 20px' }">
      <a-form-model ref="ruleForm" class="ant-advanced-form" :model="data" :rules="rules">
        <a-form-model-item style="margin-bottom:12px !important;" label="收货确认" prop="status" class="form-w-100"
          :colon="false">
          <a-radio-group v-model="data.status" @change="onStatus">
            <a-radio-button :value="2">确认收货</a-radio-button>
            <a-radio-button :value="3">拒收退回</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <badge text="验收信息" />
        <!-- <a-form-model-item label="中控包装纸盒" prop="packageBox" class="form-w-100" :colon="false">
          <a-radio-group v-model="data.packageBox">
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="2">不正常</a-radio>
          </a-radio-group>
        </a-form-model-item> -->

        <a-form-model-item label="中控外壳" prop="shell" class="form-w-100" :colon="false">
          <a-radio-group v-model="data.shell">
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="2">不正常</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <!-- <a-form-model-item label="设备接线" prop="connection" class="form-w-100" :colon="false">
          <a-radio-group v-model="data.connection">
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="2">不正常</a-radio>
          </a-radio-group>
        </a-form-model-item> -->

        <a-form-model-item label="物联网卡损耗" prop="iccLose" class="form-w-100" :colon="false">
          <a-radio-group v-model="data.iccLose">
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="2">不正常</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item label="图片信息" style="margin-bottom:0 !important;" prop="receiveImages" :colon="false"
          class="form-w-100">
          可上传图片信息图片，最多9张
          <a-upload :accept="imageAccept" :action="uploadUrl" list-type="picture-card" :file-list="receiveImagesList"
            @preview="uploadImgPreview" :headers="uploadHead" @change="uploadImgChange">
            <div v-if="receiveImagesList.length < 9">
              <a-icon type="plus" />
              <div class="ant-upload-text">上传图片</div>
            </div>
          </a-upload>
        </a-form-model-item>

        <a-form-model-item :colon="false" label="备注信息" prop="receiveRemarks" class="form-w-100"
          style="position: relative;">
          <a-textarea style="width:500px;" :maxLength="100" placeholder="请输入备注" :rows="4" v-model="data.receiveRemarks">
          </a-textarea>
          <span style="position: absolute;right:10px;bottom: -4px;color: #999999;">{{ data.receiveRemarks
      && data.receiveRemarks.length + '/' + '100' }}</span>
        </a-form-model-item>

        <template v-if="data.status == 3">
          <div class="warn">
            <a-icon style="color: #053781; margin-right: 4px" type="info-circle" theme="filled" />物件退回，需填写物流信息
          </div>

          <badge text="物流信息" style="margin-top: 20px;" />

          <a-form-model-item label="物流公司" prop="logisticsType" class="form-w-100" :colon="false">
            <a-select style="width:278px;" v-model="data.logisticsType" placeholder="请选择物流公司"
              @change="changeLogisticsType">
              <a-select-option v-for="(item, index) in listByLogistics" :key="index" :value="item.id">
                {{ item.name }}</a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="物流单号" prop="logisticsNo" class="form-w-100" :colon="false">
            <a-input style="width:276px;" v-model="data.logisticsNo" placeholder="请输入物流单号" :maxLength="25" />
          </a-form-model-item>

          <a-form-model-item label="物流凭证" style="margin-bottom:0 !important;" prop="returnBackImages" :colon="false"
            class="form-w-100">
            可上传物流凭证图片，最多9张
            <a-upload :accept="imageAccept" :action="returnBackUploadUrl" list-type="picture-card"
              :file-list="returnBackImagesList" @preview="uploadImgPreview" :headers="uploadHead"
              @change="returnBackUploadImgChange">
              <div v-if="returnBackImagesList.length < 9">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传图片</div>
              </div>
            </a-upload>
          </a-form-model-item>
        </template>
      </a-form-model>

      <div :style="{
      position: 'absolute',
      right: 0,
      bottom: 0,
      width: '100%',
      borderTop: '1px solid #e9e9e9',
      padding: '10px 16px',
      background: '#fff',
      textAlign: 'right',
      zIndex: 1,
    }">
        <a-button :style="{ marginRight: '8px' }" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">确 定</a-button>
      </div>
    </a-drawer>
    <imgPreview v-model="preview.visible" :imgList="[preview.image]" />
  </div>
</template>

<script>
import badge from '@/components/badge'
import imgPreview from '@/components/img-preview'
import { getAuthorizationHead } from '@/utils/request.js'
import { imageAccept } from '@/utils/options'
import { getBase64 } from '@/utils/util.js'
import {
  listByName, receiptConfirm, deviceRepairDeliveryUploadImage
} from '@/services/commonApi'
export default {
  components: {
    badge, imgPreview
  },
  data () {
    return {
      imageAccept,
      uploadUrl: deviceRepairDeliveryUploadImage(),
      uploadHead: getAuthorizationHead(),
      returnBackUploadUrl: deviceRepairDeliveryUploadImage(),
      visible: false,
      id: '',
      data: {},
      rules: {
        status: [
          { required: true, message: '请选择收货状态', trigger: 'change' }
        ],
        packageBox: [
          { required: true, message: '请选择中控包装纸盒', trigger: 'change' }
        ],
        shell: [
          { required: true, message: '请选择中控外壳', trigger: 'change' }
        ],
        connection: [
          { required: true, message: '请选择设备接线', trigger: 'change' }
        ],
        iccLose: [
          { required: true, message: '请选择物联网卡损耗', trigger: 'change' }
        ],
        receiveImages: [
          { required: true, message: '请上传图片信息', trigger: 'change' }
        ],
        receiveRemarks: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ],
        logisticsType: [
          { required: true, message: '请选择物流公司', trigger: 'change' }
        ],
        logisticsNo: [
          { required: true, message: '请输入物流单号', trigger: 'blur' }
        ],
        returnBackImages: [
          { required: true, message: '请上传物流凭证', trigger: 'change' }
        ]
      },
      receiveImagesList: [],
      returnBackImagesList: [],
      preview: {
        visible: false,
        image: ''
      },
      listByLogistics: []
    }
  },
  created () {
    this.getLogisticsList()
  },
  methods: {
    onInitial (row) {
      this.id = row.id
      this.data = {
        id: this.id
      }
      this.receiveImagesList = []
      this.returnBackImagesList = []
      this.visible = true
    },
    onClose () {
      this.$refs.ruleForm.resetFields()
      this.visible = false
    },
    onStatus (e) {
      this.data = {
        id: this.id,
        status: e.target.value
      }
      this.receiveImagesList = []
      this.returnBackImagesList = []
      this.$refs.ruleForm.clearValidate()
    },
    onSubmit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.onConfirm()
        }
      })
    },
    async onConfirm () {
      const res = await receiptConfirm(this.data)
      if (res.isSuccess) {
        this.$message.newFun('已经收货确认成功！', 'success', 3)
        this.onClose()
        this.$emit('getList')
      } else {
        this.$message.newFun(res.msg, 'error', 3)
      }
    },
    async uploadImgPreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.preview.image = file.url || file.preview
      this.preview.visible = true
    },
    uploadImgChange ({ fileList }) {
      this.receiveImagesList = fileList.filter(f =>
        imageAccept.split(',').includes(f.type)
      )
      for (let i = 0; i < this.receiveImagesList.length; i++) {
        const d = this.receiveImagesList[i]
        if (d.status === 'done' && Object.hasOwnProperty.call(d, 'response')) {
          if (d.response.isSuccess) {
            if (d.size > 1024 * 1024 * 10) {
              this.$message.newFun('上传文件大小不能超过10MB', 'error', 3)
              this.receiveImagesList.splice(i, 1)
            } else {
              this.receiveImagesList.splice(i, 1, {
                name: d.name,
                status: d.status,
                type: d.type,
                uid: d.uid,
                id: d.response.data.id,
                url: d.response.data.url
              })
            }
          } else {
            this.receiveImagesList.splice(i, 1)
            this.$message.newFun(d.response.msg, 'error', 3)
          }
        }
      }
      if (this.receiveImagesList.length > 0) {
        this.$set(this.data, 'receiveImages', this.receiveImagesList.map(item => item.id))
      } else {
        delete this.data.receiveImages
      }
    },
    returnBackUploadImgChange ({ fileList }) {
      this.returnBackImagesList = fileList.filter(f =>
        imageAccept.split(',').includes(f.type)
      )
      for (let i = 0; i < this.returnBackImagesList.length; i++) {
        const d = this.returnBackImagesList[i]
        if (d.status === 'done' && Object.hasOwnProperty.call(d, 'response')) {
          if (d.response.isSuccess) {
            if (d.size > 1024 * 1024 * 10) {
              this.$message.newFun('上传文件大小不能超过10MB', 'error', 3)
              this.returnBackImagesList.splice(i, 1)
            } else {
              this.returnBackImagesList.splice(i, 1, {
                name: d.name,
                status: d.status,
                type: d.type,
                uid: d.uid,
                id: d.response.data.id,
                url: d.response.data.url
              })
            }
          } else {
            this.returnBackImagesList.splice(i, 1)
            this.$message.newFun(d.response.msg, 'error', 3)
          }
        }
      }
      if (this.returnBackImagesList.length > 0) {
        this.$set(this.data, 'returnBackImages', this.returnBackImagesList.map(item => item.id))
      } else {
        delete this.data.returnBackImages
      }
    },
    async getLogisticsList () {
      const res = await listByName({ typeName: '快递公司' })
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.listByLogistics = response
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    changeLogisticsType (e) {
      this.data.logisticsName = this.listByLogistics.find(item => item.id === e)?.name
    }
  }
}
</script>

<style lang="less" scoped>
.warn {
  margin-left: 12px;
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #606266;
}
</style>
